<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, nextTick, defineExpose } from "vue";
const props = defineProps({
  messData: Array,
});

const sendText = ref();
const messWindow = ref(null)
const emits = defineEmits(["sendMessage", "closeChat"]);

// 发送按钮
const sendBtn = () => {
  emits("sendMessage", sendText.value);
  sendText.value = ''
  screenBottion()
};
// 关闭聊天窗口
const closebtn = () => {
  emits("closeChat", false);
};
// 滚动到底部
const screenBottion = () => {
  nextTick(() => {
    setTimeout(() => {
      messWindow.value.scrollTop = messWindow.value.scrollHeight
    }, 50)
  })

}

defineExpose({
  screenBottion
})

onMounted(() => {
  screenBottion()
})

</script>

<template>
  <div class="chat_window" ref="messWindow">
    <div  class="chat_top">
       <van-image
            round
            width="1.3rem"
            height="1.3rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <span>{{messData[0].from}}</span>
          <span @click="closebtn">关闭</span>
    </div>
    <div class="chat_mess_list clear" >
      <template   v-for="(item, index) in messData" :key="index">
        <!-- 收到的消息 -->
        <div class="user_from " v-if="item.flow == 'in'">
          <van-image
            round
            width="1.3rem"
            height="1.3rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <p>{{ item.text }}</p>
        </div>
        <!-- 发送的消息 -->
        <div class="user_to" v-else>
          <p>{{ item.text }}</p>
          <van-image
            round
            width="1.3rem"
            height="1.3rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
      </template>
    </div>
    <div class="chat_send">
      <input type="text" v-model="sendText" placeholder="说点什么吧"/>
      <div @click="sendBtn">发送</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat_window {
  position: fixed;
  overflow-y: scroll;
  padding-bottom: 2.2rem;
  top: 0;
  left: 0;
  width: 100vw;
  height:100vh;
  box-sizing: border-box;
  background-color: #f7f8fa;
  z-index: 10;
  .chat_top {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 0  .375rem;
    width: 100vw;
    height: 1.8125rem;
    font-size: .5rem;
    background-color: #fff;
    z-index: 11;
    box-sizing: border-box;
    .van-image{
      padding-top: .325rem;
    }
    & > span {
      line-height: 1.8125rem;
    }
  }
  .chat_mess_list {
    padding: 0.375rem;
    padding-top: 2rem;
    .user_from {
      margin-top: 0.5rem;
      margin-right: 5rem;
      float: left;
      display: flex;
      p {
        margin: 0;
        padding: 10px;
        margin-left: 12px;
        max-width: 260px;
        border-radius: 8px;
        color: #3d3d3d;
        background-color: #2badfe;
        font-size: 14px;
        word-break: break-all;
      }
    }
    .user_to {
      margin-top: 0.5rem;
      margin-left: 5rem;
      float: right;
      display: flex;
      p {
        margin: 0;
        padding: 10px;
        margin-right: 12px;
        max-width: 260px;
        border-radius: 8px;
        color: #3d3d3d;
        background-color: #fedd2b;
        font-size: 14px;
        word-break: break-all;
      }
    }
  }
  .chat_send {
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    padding: .25rem .375rem;
    background-color: #fff;
    justify-content: space-between;
    box-sizing: border-box;
    input {
      padding-left: .375rem;
      width: 8.5rem;
      height: 1.1875rem;
      border: none;
      background-color: #f7f8fa;
      border-radius: 999px;
      font-size: .5rem;
      box-sizing: border-box;

    }
    input::placeholder {
      font-size: .4688rem;
    }
    & > div {
      margin-left: .375rem;
      padding: 0 0.375rem;
      height: 1.1875rem;
      line-height: 1.1875rem;
      font-size: .4688rem;
      color: #fff;
      background-color: #ffbb01;
      border-radius: 999px;
    }
  }
}
</style>
